<template>
  <div class="">
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <e-cellbox middle class="coach-manage">
        <e-cell-item>
          <e-heading>赞助计划</e-heading>
        </e-cell-item>
        <e-cell-item class="tr small weak" >
        <el-button size="small" @click="handleedit()" type="primary">新增赞助计划</el-button>
      </e-cell-item>
      </e-cellbox>

      <div v-if="list.list && list.list.length>0">
        <template>
          <el-table
            :data="list.list"
            v-bind="getTableProps()">
            <el-table-column
              prop="brandName"
              label="品牌名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="planName"
              label="赞助计划名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="money"
              label="赞助预算">
              <template slot-scope="scope">
                {{scope.row.money/1000000 + '万元'}}
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              label="赞助计划状态">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  @change="handleChangeState(scope)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="auditStatus"
              label="审核状态">
              <template slot-scope="scope">
                {{scope.row.auditStatus | sponsorStatus}}
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button type="link" @click="handleedit(scope.row.id)" :disabled="scope.row.auditStatus == 1">修改</el-button>
                <el-button type="link" @click="handledel($event,scope.row.id,scope.row.status)" :disabled="scope.row.auditStatus == 1">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="list.total"
            v-bind="getPaginationProps(list)"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            >
          </el-pagination>
        </template>
      </div>
      <e-placeholder v-else-if="list.loaded" text="暂时没有赞助计划哦" src="/static/images/sponsor/nodata_support.png">
      </e-placeholder>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import api from 'api/sponsor'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      list: 'sponsor_support_list',
      dict: 'sponsor_dict'
    })
  },
  mounted () {
  },
  data () {
    let isCertify
    return {
      isCertify,
      onload: false,
      query: this.getQuery()
    }
  },
  created () {
    this.$store.dispatch('sponsor_dict', 'brandList')
    // console.log(this.list)
  },
  methods: {
    handleChangeState (item) { // 列表中开关方法
      if (item.row.status === '1') { // 关闭
        this.$confirm('确定要关闭赞助计划吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('sponsor_support_changestate', item)
        }).catch(() => {
          // 关闭接口错误情况下，修改数据，重新打开
          this.$store.commit('SPONSOR_SUPPORT_CHANGESTATE', {
            data: false,
            params: item
          })
        })
      } else { // 开启
        this.$store.dispatch('sponsor_support_changestate', item)
      }
    },
    handleedit (id) { // 新增和编辑方法
      if (!id) { // 判断新增 or 编辑
        if (this.dict.brandList.data.length === 0) {
          // 没有品牌时候禁止创建投放计划
          this.$confirm('您当前没有品牌,无法新建品牌计划,快去新建品牌吧！', '提示', {
            confirmButtonText: '新建品牌',
            type: 'warning'
          }).then(() => {
            this.$router.push({path: '/sponsor/brand/add'})
          }).catch(() => {
          })
          return
        }
        this.$router.push({path: '/sponsor/support/add'})
      } else {
        this.$router.push({path: '/sponsor/support/edit/' + id})
      }
    },
    handledel (event, id, status) { // 删除方法
      // console.log(event)
      this.$confirm('确定要删除数据？', '提示', {
        type: 'warning'
      }).then(() => {
        // 执行删除接口
        api.support_del({
          id: id
        }, {context: event.target}).then(res => {
          this.fetch(this.query)
        }, () => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
      })
    },
    fetch (query) { // 分页，和搜索表单发生提交时触发事件
      this.$store.dispatch('sponsor_support_list', query)
    }
  }
}
</script>

<style lang="scss" scoped>
  
</style>
